
<template>
  <Form v-bind:model="optionModel" class="diy-setting-form">
    <Collapse v-model:active-key="state.activeCollapseKey" ghost>
      <template v-for="(propsTagGroup, key) in propsRegisted" :key="key">
        <template v-for="(registeProps) in propsTagGroup" :key="registeProps.tag">
          <CollapsePanel 
            :key="registeProps.tag"
            :header="registeProps.tag" 
            v-if="isShowPanel(registeProps)" class="diy-setting-collapse-panel"
          >
            <template v-for="(editorConfig, propName, index) in registeProps.props" :key="index">
              <component v-if="hasPropEditor(propName, editorConfig.editor) && propName" 
                :is="getPropEditor(propName, editorConfig.editor)"
                :designer="designer"
                v-model:value="selectedWidget.props[propName]" 
                :selected-widget="selectedWidget"
                :optionModel="optionModel"
                :editorProps="editorConfig.editorProps" :propName="propName"
              />
            </template>
          </CollapsePanel>
        </template>
      </template>
    </Collapse>
  </Form>
</template>
<script lang="ts" name="diy-form-setting" setup>
import { ref, watch, onMounted, provide, PropType } from 'vue';
import { useRuleFormItem } from '/@/hooks/component/useFormItem';
import { useI18n } from '/@/hooks/web/useI18n';
import { Input } from 'ant-design-vue';
import type { Designer } from '../../type'
const { t } = useI18n('diyForm')
import { 
  Collapse, CollapsePanel, Form
} from 'ant-design-vue';
import useSetting from './useSetting'
const currProps = defineProps({
  // 通过标签分组的属性, key: tag, value: 分组数据集合
  propsRegisted: { type: Object },
  scrollerHeight: { type: Number },
  designer: { type: Object as () => Designer}
})
const state = ref({
  activeKey: 'comp',
  activeCollapseKey: '基础',
})
const optionModel = ref<any>()
const selectedWidget = ref<any>({
  type: 'diy-form-setting',
  formItemFlag: true,
  settingForm: {
    labelWidth: '90px',
    labelAlign: 'left'
  },
  props: currProps.designer?.globalConfig
})
const { isShowPanel, hasPropEditor, getPropEditor, updateFormItemConfig} = useSetting(selectedWidget, currProps)
onMounted(() => {

})
watch(
  () => selectedWidget.value.props,
  (val : any) => {
    console.log('formProps', val)
    updateFormItemConfig(currProps.designer)
  }, 
  {
    deep: true,
    immediate: true
  }
)
onMounted(() => {

})

</script>

<style lang="less">

</style>
